<template>
    <el-card shadow="never" class="card-border-none">
        <el-form :model="form" size="default" label-width="160px" id="list-table">
            <el-tabs v-model="activeName">
                <el-tab-pane label="注册与访问" name="first">
                    <el-form-item label="是否允许注册会员" prop="open_reg">
                        <el-radio-group v-model="form.open_reg">
                            <el-radio :value="0" border style="margin-left:4px">关闭</el-radio>
                            <el-radio :value="1" border style="margin-left:4px">开启</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="注册类型">
                        <el-radio-group v-model="form.reg_method">
                            <el-radio value="username" border style="margin-left:4px">普通注册</el-radio>
                            <el-radio value="phone" border style="margin-left:4px">手机注册</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="密码最小长度">
                        <el-input v-model="form.password_min" type="number" style="width: 30%;" placeholder="密码最小长度"></el-input>
                    </el-form-item>
                    <el-form-item label="强制密码复杂度">
                        <el-checkbox-group v-model="form.password_encrypt">
                            <el-checkbox value="0" border style="margin-left:4px">数字</el-checkbox>
                            <el-checkbox value="1" border style="margin-left:4px">小写字母</el-checkbox>
                            <el-checkbox value="2" border style="margin-left:4px">大写字母</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="上传设置" name="second">
                    <el-form-item label="默认上传方式">
                        <el-radio-group v-model="form.upload_method">
                            <el-radio value="oss" border style="margin-left:4px">阿里oss</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <template v-if="form.upload_method === 'oss'">
                        <el-form-item label="Bucket">
                            <el-input v-model="form.upload_config.Bucket" style="width: 30%;" placeholder="Bucket"></el-input>
                        </el-form-item>
                        <el-form-item label="ACCESS_KEY">
                            <el-input v-model="form.upload_config.ACCESS_KEY" style="width: 30%;" placeholder="ACCESS_KEY"></el-input>
                        </el-form-item>
                        <el-form-item label="SECRET_KEY">
                            <el-input v-model="form.upload_config.SECRET_KEY" style="width: 30%;" placeholder="SECRET_KEY"></el-input>
                        </el-form-item>
                        <el-form-item label="空间域名">
                            <el-input v-model="form.upload_config.http" style="width: 30%;" placeholder="空间域名"></el-input>
                            <small style="color:#6b7280;">请补全http:// 或 https://</small>
                        </el-form-item>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="Api安全" name="third">
                    <el-form-item label="是否开启API安全">
                        <el-radio-group v-model="form.api_safe">
                            <el-radio :value="0" border style="margin-left:4px">关闭</el-radio>
                            <el-radio :value="1" border style="margin-left:4px">开启</el-radio>
                        </el-radio-group>
                        <small style="color:#6b7280;">api安全功能开启之后调用前端api需要传输签名串</small>
                    </el-form-item>
                    <el-form-item label="秘钥">
                        <el-input v-model="form.api_secret" style="width: 30%;" placeholder="秘钥"></el-input>
                        <small style="color:#6b7280">秘钥设置关系系统中api调用传输签名串的编码规则，以及会员token解析，请慎重设置，注意设置之后对应会员要求重新登录获取token</small>
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
            <el-form-item v-permission="['setSysSetting,POST']">
                <el-button type="primary" @click="submit">保存</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script setup>
import { ref,reactive,onMounted } from 'vue'
import { showLoading,hideLoading,toast } from '~/composables/util'
import { 
    getSysconfig,
    setSysconfig,
} from '~/api/sysconfig'

const activeName = ref("first")
const form = reactive({
    open_reg:1,
    reg_method:"username",
    password_min:"",
    password_encrypt:["0"],
    upload_method:"oss",
    upload_config:{ 
        Bucket:"", 
        ACCESS_KEY:"", 
        SECRET_KEY:"", 
        http:"",
    },
    api_safe:1,
    api_secret:""
})

function getData(){
    showLoading('#list-table')
    form.password_encrypt = form.password_encrypt.join(',')
    getSysconfig().then(d=>{
        for (const k in form) {
            form[k] = d[k]
        }
        form.password_encrypt = form.password_encrypt.split(',')
    }).finally(()=>{
        hideLoading('#list-table')
    })
}

onMounted(()=>getData())

const submit = ()=>{
    showLoading('#list-table')
    form.password_encrypt = form.password_encrypt.join(',')
    setSysconfig(form).then(res=>{
        toast("修改成功")
    }).finally(()=>{
        form.password_encrypt = form.password_encrypt.split(',')
        hideLoading('#list-table')
    })
}
</script>
<style lang="scss" scoped>
.card-border-none {
    border: none;
}
:deep(.el-card__body) {
    background: #fff;
    border-radius: 4px;
}
</style>